<template>
  <div>
    <!-- 主内容区域 -->
    <div class="main-content">
      <div class="page-title">付费设置</div>

      <!-- 当前套餐 -->
      <div class="current-plan">
        <div class="plan-header">
          <div class="plan-title">当前套餐</div>
          <div class="plan-tag">已过期</div>
        </div>

        <div class="plan-info">
          <div class="plan-icon">
            <i class="fa-solid fa-rocket"></i>
          </div>

          <div class="plan-details">
            <div class="plan-name">专业版</div>
            <div class="plan-desc">高级数据分析、内容管理和粉丝互动工具</div>
          </div>

          <div class="plan-price">¥198<span class="text-gray-400 text-sm">/月</span></div>
        </div>

        <div class="plan-expiry">
          上次支付: 2025年04月15日 | 到期日: 2025年05月14日
        </div>

        <div class="plan-actions">
          <el-button type="primary" @click="renewPlan">续费</el-button>
          <el-button type="text" @click="changePlan">更换套餐</el-button>
        </div>
      </div>

      <!-- 选择套餐 -->
      <div class="section-title">选择套餐</div>
      <div class="plan-cards">
        <!-- 基础版 -->
        <div class="plan-card" :class="{ 'selected': selectedPlan === 'basic' }" @click="selectPlan('basic')">
          <div class="card-header">
            <div class="card-title">基础版</div>
            <div class="card-price">¥98</div>
            <div class="card-period">/月</div>
          </div>

          <div class="card-features">
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>基础数据分析</span>
            </div>
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>内容管理工具</span>
            </div>
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>5篇定时发布</span>
            </div>
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>基础粉丝管理</span>
            </div>
            <div class="feature-item text-gray-400">
              <i class="fa-solid fa-times"></i>
              <span>高级数据分析</span>
            </div>
            <div class="feature-item text-gray-400">
              <i class="fa-solid fa-times"></i>
              <span>关键词挖掘</span>
            </div>
          </div>

          <el-button type="primary" :plain="selectedPlan !== 'basic'" block @click="selectPlan('basic')">
            选择基础版
          </el-button>
        </div>

        <!-- 专业版 -->
        <div class="plan-card popular" :class="{ 'selected': selectedPlan === 'pro' }" @click="selectPlan('pro')">
          <div class="card-header">
            <div class="card-title">专业版</div>
            <div class="card-price">¥198</div>
            <div class="card-period">/月</div>
          </div>

          <div class="card-features">
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>高级数据分析</span>
            </div>
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>内容管理工具</span>
            </div>
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>20篇定时发布</span>
            </div>
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>完整粉丝管理</span>
            </div>
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>关键词挖掘</span>
            </div>
            <div class="feature-item text-gray-400">
              <i class="fa-solid fa-times"></i>
              <span>竞品分析</span>
            </div>
          </div>

          <el-button type="primary" :plain="selectedPlan !== 'pro'" block @click="selectPlan('pro')">
            选择专业版
          </el-button>
        </div>

        <!-- 企业版 -->
        <div class="plan-card" :class="{ 'selected': selectedPlan === 'enterprise' }" @click="selectPlan('enterprise')">
          <div class="card-header">
            <div class="card-title">企业版</div>
            <div class="card-price">¥398</div>
            <div class="card-period">/月</div>
          </div>

          <div class="card-features">
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>高级数据分析</span>
            </div>
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>内容管理工具</span>
            </div>
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>无限定时发布</span>
            </div>
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>完整粉丝管理</span>
            </div>
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>关键词挖掘</span>
            </div>
            <div class="feature-item">
              <i class="fa-solid fa-check feature-icon"></i>
              <span>竞品分析</span>
            </div>
          </div>

          <el-button type="primary" :plain="selectedPlan !== 'enterprise'" block @click="selectPlan('enterprise')">
            选择企业版
          </el-button>
        </div>
      </div>

      <!-- 支付方式 -->
      <div class="payment-methods">
        <div class="payment-title">选择支付方式</div>

        <div class="payment-options">
          <div class="payment-option" :class="{ 'selected': selectedPayment === 'alipay' }" @click="selectPayment('alipay')">
            <div class="payment-icon">
              <i class="fa-brands fa-alipay" style="color: #00A0E9;"></i>
            </div>
            <div class="payment-name">支付宝</div>
          </div>

          <div class="payment-option" :class="{ 'selected': selectedPayment === 'wechat' }" @click="selectPayment('wechat')">
            <div class="payment-icon">
              <i class="fa-brands fa-weixin" style="color: #07C160;"></i>
            </div>
            <div class="payment-name">微信支付</div>
          </div>

          <div class="payment-option" :class="{ 'selected': selectedPayment === 'creditcard' }" @click="selectPayment('creditcard')">
            <div class="payment-icon">
              <i class="fa-solid fa-credit-card" style="color: #3399FF;"></i>
            </div>
            <div class="payment-name">银行卡</div>
          </div>
        </div>

        <!-- 优惠券 -->
        <div class="coupon-section">
          <el-input placeholder="输入优惠码" v-model="couponCode" style="width: 200px;"></el-input>
          <el-button type="primary" size="small" @click="applyCoupon">应用</el-button>
          <span v-if="couponApplied" class="text-success-color">优惠码已应用 (-¥20)</span>
        </div>
      </div>

      <!-- 价格摘要 -->
      <div class="payment-summary">
        <div class="section-title">价格摘要</div>
        <div class="bg-white rounded-xl p-6 shadow-sm mb-10">
          <div class="flex justify-between mb-4">
            <span>套餐费用 ({{ getPlanName(selectedPlan) }})</span>
            <span>¥{{ getPlanPrice(selectedPlan) }}</span>
          </div>
          <div class="flex justify-between mb-4">
            <span>优惠码</span>
            <span class="text-red-500">-¥{{ couponDiscount }}</span>
          </div>
          <div class="flex justify-between mb-4 pt-4 border-t">
            <span class="font-bold">总计</span>
            <span class="font-bold">¥{{ getTotalPrice() }}</span>
          </div>

          <el-button type="primary" size="large" class="w-full mt-6" @click="confirmPayment">
            确认支付 ¥{{ getTotalPrice() }}
          </el-button>
        </div>
      </div>

      <!-- 订单历史 -->
      <div class="order-history">
        <div class="section-title">订单历史</div>

        <el-table :data="orderList" stripe style="width: 100%">
          <el-table-column prop="orderId" label="订单号"></el-table-column>
          <el-table-column prop="planName" label="套餐名称"></el-table-column>
          <el-table-column prop="amount" label="金额"></el-table-column>
          <el-table-column prop="paymentDate" label="支付日期"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="viewInvoice(scope.row)">查看发票</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="orderList.length">
        </el-pagination>
      </div>
    </div>

    <!-- 支付成功弹窗 -->
    <el-dialog :visible.sync="paymentSuccess" title="支付成功">
      <div slot="content">
        <div class="text-center">
          <i class="fa-solid fa-check-circle text-success-color text-4xl mb-4"></i>
          <p>您的订单已支付成功！</p>
          <p class="mt-2">订单号：{{ paymentOrderId }}</p>
          <p class="mt-2">金额：¥{{ paymentAmount }}</p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="paymentSuccess = false">关闭</el-button>
        <el-button type="primary" @click="viewOrderDetails">查看订单详情</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:'BillingSettings',
  data() {
    return {
      activeMenu: 'settings-billing', // 侧边栏激活项
          selectedPlan: 'pro', // 默认选择专业版
          selectedPayment: 'alipay', // 默认选择支付宝
          couponCode: '',
          couponApplied: false,
          couponDiscount: 0,
          paymentSuccess: false,
          paymentOrderId: '',
          paymentAmount: 0,

          // 订单历史数据
          orderList: [
            {
              orderId: 'ORD20250510001',
              planName: '专业版',
              amount: 198,
              paymentDate: '2025-05-10',
              status: '已支付'
            },
            {
              orderId: 'ORD20250415002',
              planName: '专业版',
              amount: 198,
              paymentDate: '2025-04-15',
              status: '已支付'
            },
            {
              orderId: 'ORD20250312003',
              planName: '专业版',
              amount: 198,
              paymentDate: '2025-03-12',
              status: '已支付'
            },
            {
              orderId: 'ORD20250210004',
              planName: '基础版',
              amount: 98,
              paymentDate: '2025-02-10',
              status: '已支付'
            },
            {
              orderId: 'ORD20250115005',
              planName: '基础版',
              amount: 98,
              paymentDate: '2025-01-15',
              status: '已支付'
            }
          ],

          // 分页设置
          currentPage: 1,
          pageSize: 5
    }
  },
  methods: {
    handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
        selectPlan(plan) {
          this.selectedPlan = plan;
        },
        selectPayment(payment) {
          this.selectedPayment = payment;
        },
        applyCoupon() {
          if (this.couponCode === 'SAVE20') {
            this.couponApplied = true;
            this.couponDiscount = 20;
            this.$message({
              message: '优惠码应用成功，享受¥20折扣！',
              type: 'success'
            });
          } else {
            this.$message.error('无效的优惠码');
          }
        },
        getPlanName(plan) {
          const planNames = {
            'basic': '基础版',
            'pro': '专业版',
            'enterprise': '企业版'
          };
          return planNames[plan] || plan;
        },
        getPlanPrice(plan) {
          const planPrices = {
            'basic': 98,
            'pro': 198,
            'enterprise': 398
          };
          return planPrices[plan] || 0;
        },
        getTotalPrice() {
          return this.getPlanPrice(this.selectedPlan) - this.couponDiscount;
        },
        confirmPayment() {
          // 模拟支付流程
          this.paymentOrderId = 'ORD' + new Date().getTime();
          this.paymentAmount = this.getTotalPrice();

          // 显示支付成功弹窗
          this.paymentSuccess = true;
        },
        viewOrderDetails() {
          // 实际应用中跳转到订单详情页
          this.paymentSuccess = false;
          this.$message.info('查看订单详情功能即将上线');
        },
        renewPlan() {
          // 续费当前套餐
          this.selectPlan('pro'); // 假设当前是专业版
          this.$message.info('已选择续费专业版套餐');
        },
        changePlan() {
          // 切换套餐
          this.$message.info('请选择需要切换的套餐');
        },
        viewInvoice(row) {
          // 查看发票
          this.$message.info(`查看${row.orderId}发票功能即将上线`);
        },
        handleSizeChange(size) {
          this.pageSize = size;
        },
        handleCurrentChange(page) {
          this.currentPage = page;
        }
  }
}
</script>

<style lang="scss" scoped>

    .page-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    /* 付费设置相关样式 */
    .current-plan {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-bottom: 20px;
    }

    .plan-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .plan-title {
      font-size: 18px;
      font-weight: 500;
    }

    .plan-tag {
      background-color: rgba(254, 44, 85, 0.1);
      color: var(--primary-color);
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
    }

    .plan-info {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 16px 0;
      border-top: 1px solid #EBEEF5;
      border-bottom: 1px solid #EBEEF5;
    }

    .plan-icon {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      background-color: rgba(254, 44, 85, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-color);
      font-size: 24px;
    }

    .plan-details {
      flex: 1;
    }

    .plan-name {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 4px;
    }

    .plan-desc {
      color: var(--gray-color);
      font-size: 14px;
    }

    .plan-price {
      font-size: 20px;
      font-weight: bold;
    }

    .plan-expiry {
      color: var(--gray-color);
      font-size: 14px;
      margin-top: 8px;
    }

    .plan-actions {
      display: flex;
      gap: 10px;
      margin-top: 16px;
    }

    /* 套餐选择卡片 */
    .plan-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      margin-bottom: 20px;
    }

    .plan-card {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      border: 2px solid transparent;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
    }

    .plan-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

    .plan-card.selected {
      border-color: var(--primary-color);
    }

    .plan-card.popular::before {
      content: '热门';
      position: absolute;
      top: -10px;
      right: 20px;
      background-color: var(--primary-color);
      color: white;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      z-index: 10;
    }

    .card-header {
      text-align: center;
      margin-bottom: 16px;
    }

    .card-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .card-price {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 4px;
    }

    .card-period {
      color: var(--gray-color);
      font-size: 14px;
    }

    .card-features {
      margin-bottom: 20px;
    }

    .feature-item {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      font-size: 14px;
    }

    .feature-icon {
      color: var(--success-color);
    }

    /* 支付方式 */
    .payment-methods {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-bottom: 20px;
    }

    .payment-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 16px;
    }

    .payment-options {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
    }

    .payment-option {
      border: 1px solid #EBEEF5;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .payment-option:hover {
      border-color: var(--primary-color);
    }

    .payment-option.selected {
      border-color: var(--primary-color);
      background-color: rgba(254, 44, 85, 0.05);
    }

    .payment-icon {
      font-size: 24px;
    }

    .payment-name {
      font-weight: 500;
    }

    /* 优惠券 */
    .coupon-section {
      margin-top: 20px;
    }

    .coupon-input {
      display: flex;
      gap: 10px;
    }

    /* 订单历史 */
    .order-history {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

   .section-title{
    margin-bottom: 10px;
   }
</style>
